import "./style.css";
import { Tooltip } from 'antd';
const etcStyle = {
  textOverflow: "ellipsis",
  overflow: "hidden",
}

export default function BasicInfo({ detail }) {
  return (
    <div className="tabs-wrap">
      <h1>基础信息</h1>
      <div className="base-container">
        <div>商品名称：<span>{detail.name}</span></div>
        <div>权益类型：<span>虚拟</span></div>
        <div>富文本：<span>富文本</span></div>
        <div>类目：<span>虚拟服务</span></div>
        <div>兑换限制：<span>{detail.bound}件</span></div>
        <div>创建时间：<span>2022-05-18 23:37</span></div>
        <div>修改时间：<span>2022-05-18 23:37</span></div>
        <Tooltip title={detail.security}>
          <div style={{ ...etcStyle, textWrap: "nowrap" }}>服务保障：
            <span >{detail.security}</span>
          </div>
        </Tooltip>
        <Tooltip title={detail.desc}>
          <div style={{ ...etcStyle, textWrap: "nowrap" }}>描述信息：
            <span >{detail.desc}</span>
          </div>
        </Tooltip>
      </div>
      <div className="show-time">展示时间：<span>{detail.shelf_on} ~ {detail.shelf_off}</span></div>
      <h1>投放城市</h1>
      <div className="city-container">
        <div>城市白名单：<span>{detail.blacklist}</span></div>
        <div>城市黑名单：<span>{detail.whitelist}</span></div>
      </div>
      <h1>供应商信息</h1>
      <div className="info-container">
        <div>供应商名称：<span>{detail.vendor}</span></div>
        <div>供应商联系方式：<span>{detail.phone}</span></div>
      </div>
    </div>
  );
}
